<template>
  <div>
    <el-alert title="警告" type="warning" show-icon description="此功能为开发人员配置菜单及接口权限，非开发人员请勿随便修改，否则会导致系统及相关权限出错！">
    </el-alert>
    <div class="c-h-10p"></div>
    <menu-list ref="menuListRef" multiple-select v-model:tableLoading="tableLoading" :disabled="!can('READ')">
      <template #toolbar-left>
        <el-button @click="openCreate()" type="primary" :disabled="!can('EDIT')">创建菜单</el-button>
      </template>
      <template #column>
        <el-table-column label="操作" fixed="right" align="center" width="100">
          <template #default="{ row }">
            <el-button size="mini" type="text" icon="el-icon-plus" @click="openCreate(row)"
              :disabled="row.isPage || !can('EDIT')" />
            <el-button size="mini" type="text" icon="el-icon-edit" @click="openEditById(row.id)"
              :disabled="!can('EDIT')" />
            <el-button size="mini" type="text" icon="el-icon-delete" @click="del(row)" :disabled="!can('EDIT')" />
          </template>
        </el-table-column>
      </template>
    </menu-list>
    <menu-edit-dialog ref="menuEditDialogRef" @close-saved="getData" />
  </div>
</template>
<script setup>
import menuList from "@/components/sys/menu/list.vue";
import menuEditDialog from "@/components/sys/menu/editDialog.vue";
import { ref, onMounted, useTemplateRef } from "vue";
import { can } from "@/utils/permission";
import menuApi from "@/api/sys/menu"

onMounted(async () => {
  await getData();
})
const menuListRef = useTemplateRef("menuListRef")
const menuEditDialogRef = useTemplateRef("menuEditDialogRef")
const getData = () => {
  menuListRef.value.getData();
}
const openCreate = (row = null) => {
  menuEditDialogRef.value.openCreate(row);
}
const openEditById = (id) => {
  menuEditDialogRef.value.openEditById(id);
}

const tableLoading = ref(false)
const del = async (row) => {
  await ElMessageBox.confirm("您确定要删除此菜单吗？", "删除确认", {
    type: "warning",
  });
  tableLoading.value = true;
  let res = await menuApi.deleteById(row.id);
  if (res.code != 0) {
    tableLoading.value = false;
    return;
  }
  await getData();
}
</script>